<!--
 * @Description: file content
 * @Author: oooh
 * @Date: 2024-04-27 17:20:26
 * @LastEditors: oooh
 * @LastEditTime: 2024-05-15 11:26:10
 * @FilePath: \Civil_Servant_Performance_PC\src\views\performance-inventory\civil\excellent-rating.vue
-->
<template>
  <div class="component-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
      <el-form-item label="评优类型" prop="matterTypeDict">
        <el-select v-model="queryParams.matterTypeDict" placeholder="选择评优类型" clearable @change="handleQuery">
          <el-option v-for="dict in dict.type.biz_excellent_apply_matter_type" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="flex-table">
      <el-table :data="tableList" height="100%" border v-loading="tableLoading" ref="table">
        <el-table-column label="序号" type="index" align="center">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="matterTypeDict" label="评优类型" width="180" align="center">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.biz_excellent_apply_matter_type" :value="scope.row.matterTypeDict"></dict-tag>
          </template>
        </el-table-column>
        <el-table-column prop="matterDate" label="评优日期" width="100" align="center"> </el-table-column>
        <el-table-column prop="civilServantName" label="申请人" min-width="160" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.civilServantName || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="deptName" label="所属站办所" align="center"> </el-table-column>
        <el-table-column prop="auditStatusDict" label="审核状态" width="130" align="center">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.biz_audit_status" :value="scope.row.auditStatusDict"></dict-tag>
          </template>
        </el-table-column>
        <el-table-column prop="applyDate" label="申请日期" width="100" align="center"> </el-table-column>
        <el-table-column label="依据材料" prop="materialUrls" align="center" min-width="120">
          <template slot-scope="scope">
            <div v-if="scope.row.materialUrls">
              <el-tooltip
                v-for="(url, index) in scope.row.materialUrls.split(',')"
                :key="index"
                effect="dark"
                :content="formatFileUrl(url)['name']"
                placement="top-start"
              >
                <el-button type="text" @click="handlePreviewFile(url)" class="file-preview-btn" size="mini">
                  {{ formatFileUrl(url)['name'] }}
                </el-button>
              </el-tooltip>
            </div>
            <span v-else>-</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination
      v-show="tableTotal > 0"
      :total="tableTotal"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import FilePreview from '@/components/FilePreview'
import { list as listPlan } from '@/api/work/excellent-rating'
import { quarterToMonth } from '@/utils/quarter.js'
import { mixins } from '@/mixins'
export default {
  name: 'performance-inventory_civil_excellent-rating',
  mixins: [mixins],
  dicts: ['biz_work_nature', 'biz_audit_status', 'biz_excellent_apply_matter_type'],
  props: {
    queryForm: {
      type: Object,
      default: () => {}
    }
  },
  components: { FilePreview },
  data() {
    return {
      filePreviewVisible: false,
      previewFile: {},
      // 月度筛选
      monthFilters: [],
      tableTotal: 0,
      tableList: [],
      tableLoading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        matterTypeDict: '',
        auditStatusDict: ''
      }
    }
  },
  computed: {},
  watch: {
    queryForm: {
      deep: true,
      immediate: true,
      handler(query) {
        this.queryParams = { ...this.queryParams, ...query }
        this.getList()
        this.monthFilters = quarterToMonth(query.quarter).map(month => {
          return { text: month + '月', value: month }
        })
      }
    }
  },
  methods: {
    // 预览文件
    handlePreviewFile(url) {
      let fileItem = this.formatFileUrl(url)
      this.previewFile = { url, ...fileItem }
      this.filePreviewVisible = true
    },
    // 月度数据筛选
    filterMonthHandler(value, row, column) {
      const property = column['property']
      return row[property] === value
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryParams.pageNum = 1
      this.handleQuery()
    },
    // 工作列表
    getList() {
      this.tableLoading = true
      listPlan(this.queryParams)
        .then(res => {
          this.tableLoading = false
          let { rows, total } = res
          this.tableTotal = total
          this.tableList = rows
        })
        .catch(err => (this.tableLoading = false))
    }
  }
}
</script>

<style lang="scss"></style>
